<style lang="less">
.inpt{
    max-width: 320px;;
}
</style>
<template>
  <page-default>

    <section class="app-section">
<div class="q-pa-md">

    <div class="row">
      <div class="col-md-6 col-xs-12">
        <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-xl">
      <template>
 <q-form
      @submit="onSubmit"
      class="q-gutter-md"
    >
      <q-input
        filled
        class="inpt"
        v-model="form.name"
        label="服务名称(英文)"
        hint="字母开头"
        lazy-rules
        :rules="[ val => val && val.length > 0 || '必填项目']"
      />
         <q-input
        filled
        class="inpt"
        v-model="form.rule"
        label="匹配的路径"
        hint="例如: /apihp"
        lazy-rules
        :rules="[ val => val && val.length > 0 || '必填项目']"
      />
     <q-input v-if="form.rule"
        filled
        class="inpt"
        v-model="form.stripprefix"
        label="去除的前缀"
        hint="例如: /apihp"
      />
    <q-toggle v-model="form.isbasicauth" label="是否启用basic auth" />
      

        <q-select
          filled
          v-model="form.midlist"
          multiple
          class="inpt"
          :options="midlist"
          use-chips
          stack-label
          label="中间件"
        />
      
      <q-select class="inpt" filled bottom-slots v-model="form.service" :options="upstreamlist" label="service" counter maxlength="12">
        <template v-slot:append>
          <q-btn round dense flat icon="add" @click="newUpst" />
        </template>
      </q-select>

      <div>
        <q-btn label="提交"  text-color="black"  color="Primary" @click="saveRouter" style="width: 200px;" />
      </div>
    </q-form>
</template>
      </div>
      </div>
      <div class="col-md-6 col-xs-12">
       <q-card v-if="form.midlist&& form.midlist.length>0" class="my-card " style="max-width: 260px;margin:10px auto;">
      <q-card-section>
        <div class="text-h6"  style="text-align:center;">中间件管理</div>
      </q-card-section>
      <q-separator dark />
      <q-card-actions vertical>
        <q-btn flat @click="goMid(v)" v-for="v in form.midlist">{{v}}</q-btn>
      </q-card-actions>
    </q-card>
      <q-card class="my-card " v-if="form.service&& form.service.length>0" style="max-width: 260px;margin:10px auto;">
      <q-card-section>
        <div class="text-h6" style="text-align:center;">服务管理</div>
      </q-card-section>
      <q-separator dark />
      <q-card-actions vertical>
        <q-btn flat @click="goSrv(form.service)"  >{{form.service}}</q-btn>
      </q-card-actions>
    </q-card>
      </div>
    </div>
</div>  


     
    </section>


    <!-- <q-dialog
      v-model="upstream_status"
    >
      <q-card style="width: 600px; max-width: 80vw;">
        <q-card-section>
           <q-input 
            filled
            :disable="upstream_service.type == 1"
            class="inpt"
            v-model="upstream_service.name"
            label="名称(只可是字母不区分大小写)"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '必填项目']"
        />
         <q-toggle v-model="upstream_service.ishcheck" label="健康检查" />
           <template v-if="upstream_service.ishcheck">
            <q-input 
            filled
            class="inpt"
            v-model="upstream_service.healthcheck"
            label="健康检查路径"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '必填项目']"
        />
        <q-input 
            filled
            class="inpt"
            v-model="upstream_service.interval"
            label="检查间隔(s)"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '必填项目']"
        />
        <q-input 
            filled
            class="inpt"
            v-model="upstream_service.timeout"
            label="超时时间(s)"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '必填项目']"
        />
           </template>
           
        </q-card-section>

         <q-card-section>      
           <q-input bottom-slots v-model="upstream_service.upstream[index]" v-for="(val, index) in upstream_service.upstream" :key="index" :label="'('+(index+1)+')upstream 地址'">
                <template v-slot:hint>
                upstream
                </template>
                    <template v-slot:before v-if="upstream_service.upstream.length>1">
                            <q-btn @click="delUpstream(index)" round dense flat icon="close" />
                    </template>
                <template v-slot:append v-if="upstream_service.upstream.length<5">
                <q-btn @click="addUpstream(index)" round dense flat icon="add" />
                </template>
            </q-input>
        </q-card-section>


        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="取消" v-close-popup />
          <q-btn flat label="保存" @click="saveupstream" />
        </q-card-actions>


      </q-card>
      
    </q-dialog> -->




  </page-default>
</template>

<script>

import { mapActions, mapGetters } from 'vuex'
import DiyService from '../../../_services/DiyService'
import PageDefault from '../../../components/_commons/PageDefault'

export default {
  name: 'PageHTTPMiddlewares',
  components: {
    PageDefault,
  },
  data () {
    return {
        upstream_status: !1,
        upstreamlist:[""],
        hasmid: false,
        upstream_service:{
            type: 0,
            name:"",
            ishcheck: false,
            healthcheck:"/",
            interval: "10s",
            timeout: "3s",
            upstream:[""],
        },
        midlist: [],
        form:{
            midlist:[],
            name: "",
            service:"",
            stripprefix: "",
            isbasicauth: false,
            rule: "",
            // ishcheck: false,
            // healthcheck:"/",
            // interval: "10s",
            // timeout: "3s",
        }
    }
  },
  computed: {
    ...mapGetters('http', { allMiddlewares: 'allMiddlewares' })
  },
  // created(){
  //     this.refreshAll()
  //     this.getupstream()
  // },
  methods: {
    ...mapActions('http', { getAllMiddlewares: 'getAllMiddlewares' }),
    onSubmit() {
    },
    goMid(name){
      this.$router.push({
        name: "addMiddlewares",
        params:{
          name: name
        }
      })
    },
    goSrv(name){
      this.$router.push({
        name: "addServices",
        params:{
          name: name
        }
      })
    },
    newUpst(){
      this.upstream_status = true
      this.upstream_service ={
            type: 0,
            name:"",
            ishcheck: false,
            healthcheck:"/",
            interval: "10s",
            timeout: "3s",
            upstream:[""],
        }
    },
    saveRouter(){
      DiyService.saveRouter(this.form)
        .then(body => {
          
          this.$q.dialog({
            dark: true,
            title: '提示',
            message: body.message
          })
        })
        .catch(error=>{
          console.log(error)
          return Promise.reject(error)
        })
    },
    saveupstream(){
       DiyService.saveService(this.upstream_service)
        .then(body => {
          this.$q.dialog({
            dark: true,
            title: '提示',
            message: body.message
          })
        })
        .catch(error => {
         this.$q.dialog({
            dark: true,
            title: '提示',
            message: "保存失败,请刷新页面"
          })
          return Promise.reject(error)
        })
    },
    addUpstream(index){
        let upstream = this.upstream_service.upstream
        upstream.splice(index, 0, "")
        this.upstream_service.upstream = upstream
    },
    delUpstream(index){
        let upstream = this.upstream_service.upstream
        upstream.splice(index, 1)
        this.upstream_service.upstream = upstream
    },
    refreshAll(){
      if (this.$route.query.rname)
        DiyService.getRouter(this.$route.query.rname)
        .then(body => {
          console.log(body)
         if(body.error == 0){
            this.form = body.data
          }
          return body
        }).catch(error=>{
          return Promise.reject(error)
        })
    },
    getupstream(){
        DiyService.getupstream()
        .then(body => {
          console.log(body)
          if (body.error == 0 && body.data.length>0)
            this.upstreamlist = body.data
          return body
        }).catch(error=>{
          return Promise.reject(error)
        })
    },
    getmidlist(){
        DiyService.getMidlist()
        .then(body => {
          console.log(body)
          if (body.error == 0 && body.data.length>0)
            this.midlist = body.data
          return body
        }).catch(error=>{
          return Promise.reject(error)
        })
    },
  },
  watch: {
    'status' () {
      this.refreshAll()
    },
    'filter' () {
      this.refreshAll()
    }
  },
  mounted () {
    this.refreshAll()
    this.getupstream()
    this.getmidlist()
  },
  beforeDestroy () {
    this.$store.commit('http/getAllMiddlewaresClear')
  }
}
</script>

<style scoped lang="scss">

</style>
